<template>
	<el-col :span="24" class="header" :class="{ zIndex9: !editVisible }">
		<!-- 折叠按钮 -->
		<el-col :span="0.5" class="collapse-box">
			<div class="collapse-btn">
				<img src="@/assets/img/logo.png" alt="" style="width: 32px; height: 32px" />
			</div>
		</el-col>
		<el-col :span="3.5" class="logo">{{config}}IT智慧运维平台</el-col>

		<el-col :span="18" class="header-right">
			<el-col class="header-user-con">
				<div class="header-menu-con">
					<el-popover placement="bottom" width="240" trigger="hover">
						<div>
							<v-HeadMenu />
						</div>
						<i slot="reference" style="font-size: 32px;cursor: pointer;" class="el-icon-s-grid"></i>
					</el-popover>
				</div>
				<div class="header-time-con">
					<el-button type="primary" disabled>剩余时间：{{ remainder[0] || 0 }} 天 {{ remainder[1] || 0 }} 时
						{{ remainder[2] || 0 }} 分
					</el-button>
				</div>
				<!-- <v-TodayKey></v-TodayKey> -->
				<div class="oneKey">
					<v-TodayKey></v-TodayKey>
				</div>
				<!-- 警告 -->
				<div class="warning">
					<v-warning></v-warning>
				</div>
				<!-- 全屏显示 -->
				<div>
					<div class="btn-fullscreen" @click="handleFullScreen">
						<el-tooltip effect="dark" :content="fullscreen ? `取消全屏` : `全屏`" placement="bottom">
							<i class="el-icon-rank"></i>
						</el-tooltip>
					</div>
				</div>
				<!-- 用户头像 -->
				<div class="user-avator">
					<img src="@/assets/img/header.gif" />
				</div>
				<!-- 用户名下拉菜单 -->
				<div>
					<el-dropdown class="user-name" trigger="click" @command="handleCommand">
						<span class="el-dropdown-link">
							{{ name }} <i class="el-icon-caret-bottom"></i>
						</span>
						<el-dropdown-menu slot="dropdown">
							<!-- 开发调试用 -->
							<el-dropdown-item divided command="loginout">退出登录</el-dropdown-item>
						</el-dropdown-menu>
					</el-dropdown>
				</div>
			</el-col>
		</el-col>

		<!-- 修改密码弹窗 -->
		<el-dialog title="修改密码" :visible.sync="editVisible" width="30%" @close="clearData('passForm')"
			:close-on-click-modal="false">
			<el-form :model="passForm" :rules="rules" ref="passForm" label-width="100px">
				<el-form-item label="新密码" prop="password2">
					<el-input type="password" v-model="passForm.password2" autocomplete="new-password">
					</el-input>
				</el-form-item>
				<el-form-item label="确认新密码" prop="password3">
					<el-input type="password" v-model="passForm.password3" autocomplete="new-password">
					</el-input>
				</el-form-item>
			</el-form>

			<span slot="footer">
				<el-button @click="editVisible = false">取 消</el-button>
				<el-button type="primary" @click="submitBtn('passForm')">确 定</el-button>
			</span>
		</el-dialog>
		<Timer></Timer>
	</el-col>
</template>
<script>
	window.onunloadcancel = () => {
		DeleteDataBase("userBase", "infoBase");
	};
	import config from '../../../public/config.js';
	import {
		editUser
	} from "@/api/index";
	import vWarning from "common/Warning.vue";
	import vOnekey from "common/OneKey.vue";
	import router from "@/router";
	import vTodayKey from "common/TodayKey.vue";
	const crypto = require("crypto");
	import {
		indexedDb,
		DeleteDataBase,
		getUserData
	} from "@/utils/IndexedDB.js";
	import {
		dynamic_routes
	} from "@/router/dynamic_routes.js";
	import Timer from "@/components/common/Timer";
	import moment from "moment";
	import vHeadMenu from "./menuContainer/index.vue";

	export default {
		components: {
			vWarning,
			vOnekey,
			vTodayKey,
			Timer,
			vHeadMenu,
		},
		data() {
			var validatePass1 = (rule, value, callback) => {
				if (value === "") {
					callback(new Error("请输入密码"));
				} else {
					if (this.passForm.password2 !== "") {
						this.$refs.passForm.validateField("password2");
					}
					callback();
				}
			};
			var validatePass2 = (rule, value, callback) => {
				if (value === "") {
					callback(new Error("请输入密码"));
				} else {
					if (this.passForm.password3 !== "") {
						this.$refs.passForm.validateField("password3");
					}
					callback();
				}
			};
			var validatePass3 = (rule, value, callback) => {
				if (value === "") {
					callback(new Error("请再次输入密码"));
				} else if (value !== this.passForm.password2) {
					callback(new Error("两次输入密码不一致!"));
				} else {
					callback();
				}
			};
			return {
				config:comfig.textName,
				collapseCD: true,
				fullscreen: false,
				dataName: "",
				editVisible: false,
				passForm: {
					password1: "",
					password2: "",
					password3: "",
				},
				rules: {
					password1: [{
						validator: validatePass1,
						trigger: "blur"
					}],
					password2: [{
						validator: validatePass2,
						trigger: "blur"
					}],
					password3: [{
						validator: validatePass3,
						trigger: "blur"
					}],
				},
				userInfo: "",
				USERINFO: "",
			};
		},
		created() {
			this.$store.commit("setLoginStatus", "login");
			indexedDb("refreshBase", [{
				id: 0,
				value: "30"
			}], "infoBase", "id");
		},
		computed: {
			name() {
				let name = localStorage.getItem("ms_name");
				return name ? name : this.dataName;
			},
			remainder() {
				return this.$store.getters["time/getexcessTime"];
			},
			leftTime() {
				return this.$store.getters["time/getleftTime"];
			},
			status() {
				return this.$store.getters.getIsLogin;
			},
		},
		methods: {
			handleCommand(command) {
				switch (command) {
					case "loginout":
						DeleteDataBase("userBase", "infoBase");
						this.$store.commit("time/removeremainder", []);
						this.$store.commit("time/removeendTime", "");

						localStorage.clear();
						this.$routes.push({
							name: "Login"
						});
						window.location.reload();

						break;
					case "editPass":
						this.editVisible = true;
						break;

					default:
						break;
				}
			},
			handleFullScreen() {
				let screenHeight =
					document.documentElement.clientHeight || document.body.clientHeight;
				if (screenHeight < 900) {
					this.$message({
						message: "当前显示器过小,禁止全屏,请换显示器后重试",
						duration: 5000,
						type: "error",
					});
					return;
				}
				// console.log(screenHeight)
				let element = document.documentElement;
				if (this.fullscreen) {
					if (document.exitFullscreen) {
						document.exitFullscreen();
					} else if (document.webkitCancelFullScreen) {
						document.webkitCancelFullScreen();
					} else if (document.mozCancelFullScreen) {
						document.mozCancelFullScreen();
					} else if (document.msExitFullscreen) {
						document.msExitFullscreen();
					}
				} else {
					if (element.requestFullscreen) {
						element.requestFullscreen();
					} else if (element.webkitRequestFullScreen) {
						element.webkitRequestFullScreen();
					} else if (element.mozRequestFullScreen) {
						element.mozRequestFullScreen();
					} else if (element.msRequestFullscreen) {
						element.msRequestFullscreen();
					}
				}
				this.fullscreen = !this.fullscreen;
				if (this.$route.name == 'dashBoardMainPage') {
					this.$router.push("/LargeScreen");
				}
			},
			clearData(formName) {
				this.passForm.password1 = "";
				this.passForm.password2 = "";
				this.passForm.password3 = "";
				this.$refs[formName].resetFields();
			},
			submitBtn(formName) {
				this.$refs[formName].validate((valid) => {
					if (valid) {
						this.submitForm();
					} else {
						return false;
					}
				});
			},
			async submitForm() {
				const oldPass = crypto.createHash("md5");
				oldPass.update(this.passForm.password1);
				const newPass = crypto.createHash("md5");
				newPass.update(this.passForm.password2);

				await getUserData("userBase", "infoBase", 0).then((res) => {
					this.USERINFO = res;
				});

				let _data = {
					endtime: moment(this.USERINFO.endTime).format("YYYY/MM/DD HH:mm:ss"),
					username: this.USERINFO.ms_username,
					power: this.USERINFO.power,
					password: this.passForm.password2,
					id: this.USERINFO.icd,
					creattime: moment(this.USERINFO.creteTime).format(
						"YYYY/MM/DD HH:mm:ss"
					),
					rk: this.USERINFO.userAuthority,
				};
				editUser(_data)
					.then((res) => {
						this.$message.success({
							message: "操作成功",
							duration: 1000,
						});
						this.editVisible = false;
					})
					.catch((err) => {
						this.$message.error({
							message: "操作失败2",
							duration: 1000,
						});
						this.editVisible = false;
					});
			},
		},
		mounted() {},
		updated() {
			//
		},
		destroyed() {},
	};
</script>
<style scoped>
	.zIndex9 {
		z-index: 9;
	}

	.header {
		position: relative;
		box-sizing: border-box;
		width: 100%;
		height: 50px;
		font-size: 22px;
		color: #fff;
		box-shadow: 0 1px 5px rgba(0, 0, 0, 0.8);
	}

	.collapse-btn {
		float: left;
		height: 100%;
		padding: 0 16px;
		/* background: rgba(2, 16, 51); */
		background: rgba(14, 221, 240, 0.32);
		cursor: pointer;
		-webkit-transition: all 0.3s linear;
		transition: all 0.3s linear;
	}

	.collapse-btn:hover {
		background: rgba(29, 176, 184, 0.9);
		-webkit-animation: bg 0.3s linear;
		animation: bg 0.3s linear;
	}

	@keyframes bg {
		0% {
			background: rgba(14, 221, 240, 0.32);
		}

		100% {
			background: rgba(29, 176, 184, 0.9);
		}
	}

	.collapse-box {
		height: 100%;
	}

	.collapse-btn img {
		position: relative;
		top: 9px;
	}

	.collapse-btn:hover img {
		-webkit-animation: spin 5s linear infinite;
		animation: spin 5s linear infinite;
	}

	@keyframes spin {
		0% {
			-webkit-transform: rotate(0deg);
			-ms-transform: rotate(0deg);
			transform: rotate(0deg);
		}

		100% {
			-webkit-transform: rotate(360deg);
			-ms-transform: rotate(360deg);
			transform: rotate(360deg);
		}
	}

	.header .logo {
		float: left;
		padding: 0 15px 0 15px;
		line-height: 50px;
	}

	.header-right {
		float: right;
		padding-right: 50px;
	}

	.header-user-con {
		/* float: right; */
		display: flex;
		height: 50px;
		align-items: center;
		justify-content: flex-end;
	}

	.header-menu-con,
	.user-avator {
		margin-right: 10px;
	}

	.btn-fullscreen {
		transform: rotate(45deg);
		margin-right: 5px;
		font-size: 24px;
		margin-top: 6px;
	}

	.btn-bell,
	.btn-fullscreen {
		position: relative;
		width: 30px;
		height: 30px;
		text-align: center;
		border-radius: 15px;
		cursor: pointer;
	}

	.btn-bell-badge {
		position: absolute;
		right: 0;
		top: -2px;
		width: 8px;
		height: 8px;
		border-radius: 4px;
		background: #f56c6c;
		color: #fff;
	}

	.btn-bell .el-icon-bell {
		color: #fff;
	}

	.user-name {
		/* margin-left: 10px; */
	}

	.user-avator {
		/* margin-left: 20px; */
	}

	.user-avator img {
		display: block;
		width: 40px;
		height: 40px;
		border-radius: 50%;
	}

	.el-dropdown-link {
		color: #fff;
		cursor: pointer;
	}

	.el-dropdown-menu__item {
		text-align: center;
	}

	.header .header-right .oneKey {
		margin-right: 20px;
	}

	.header-time-con {
		display: grid;
		height: 50px;
		justify-content: end;
		align-content: center;
		margin-right: 20px;
	}

	.header-refresh {}
</style>
